<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>移动端图片浏览</title>
</head>
<body>
<link rel="stylesheet" href="touchpreviewimg.css">
<div class="wsj_touch_wrap">
        <img src="1.jpg" data-touchimg="9.34mb.gif" />
</div>
<br />                     
<hr />
<br />                     

<button id="create_pic">点击动态生成图片</button>
<br /><br />                     
<hr />
<br />  

<div id="dynamic_pic"></div>


<script src="touchpreviewimg.js"></script>
<script>
/*
 * 使用方法
 * 因为考虑到性能问题,所以采用事件委托机制,给需要点击的图片最外层加一个class,然后调用WsjPreviewImg方法即可
 * class的名字可以随意写,默认为wsj_touch_wrap
 * img标签中有data-touchimg属性才会有预览效果,值为图片地址,可以与src地址不一样
*/


WsjPreviewImg()

//动态生成图片后,也需要调用一次WsjPreviewImg方法,源码中已做防重复添加事件监听功能
document.getElementById('create_pic').onclick = function () {
    document.getElementById('dynamic_pic').innerHTML = '<div class="gaga"><img src="small.jpg" data-touchimg="big.jpg" /></div>'
    WsjPreviewImg('gaga')
}

</script>
</body>
</html>